import { Fragment, defineComponent, reactive } from 'vue';
import { pathPage, routeWrap, route, routeActive, iconWrap, iconActive, icon1, icon2, icon3, textActive, wrap, contentWrap, content1, content2, navigate, title, distance } from './Path.module.scss';
import { map, navi, poi } from '@/store';
import { RouteDataType } from '@/utils/type';
import { showLoadingToast } from 'vant';
import { fmapObj } from '../fmap/Fmap';

/*
---文件
*/
export const pathObj = reactive({
    navType: "实时" as "实时" | "模拟", //导航类型
    routeWrapFlag: false, //是否显示当前层所有路线，顶部导航路线弹框指引
    routeData: [] as RouteDataType[],
    routeIdx: 0, //当前选择路线类型id，对应routeList中的index
    endFloorIdx: 1,
})

export default defineComponent({
    name: 'Path',
    data() {
        return {
        };
    },
    methods: {
        changeRoute(index: number) {
            pathObj.routeIdx = index;
            navi.addNaviLine(navi.routeList[index]);
        },
        toNav() {
            showLoadingToast({
                message: '加载中...',
                forbidClick: true,
                duration: 0,
            });
            map.curPageType = "nav";
            poi.infoType = "";
            fmapObj.top = "70";

            if (fmapObj.isRecord) {
                // 重现定位数据-智能
                navi.startRecord(navi.routeList[pathObj.routeIdx]);
            } else {
                if (pathObj.navType == '实时') {
                    navi.startNavigation(navi.routeList[pathObj.routeIdx]);
                    // poi.requestStatistics("navigation", {
                    //     startPoi: JSON.stringify(poi.start),
                    //     endPoi: JSON.stringify(poi.end),
                    //     endPoiId: poi.end.fid ?? null,
                    // });
                } else {
                    navi.startSimulate(navi.routeList[pathObj.routeIdx]);
                }
            }
        },
    },
    render() {
        return <Fragment>
            <div class={pathPage} v-show={map.pathFlag}>
                <div class={routeWrap} v-show={pathObj.routeWrapFlag}>
                    {pathObj.routeData.map((item: RouteDataType, index) => {
                        return <div class={`${route} ${pathObj.routeIdx == index && routeActive}`} onClick={() => this.changeRoute(index)}>
                            <div class={`${iconWrap} ${pathObj.routeIdx == index && iconActive}`}>
                                <img class={`${index == 0 && icon1} ${index == 1 && icon2} ${index == 2 && icon3}`} src={item.imageUrl} />
                            </div>
                            <div class={`${title} ${route} ${pathObj.routeIdx == index && textActive}`}>{item.title}</div>
                            <div class={`${distance} ${route} ${pathObj.routeIdx == index && textActive}`}>{(+item.distance).toFixed(0)}米</div>
                        </div>
                    })}
                </div >
                <div class={wrap}>
                    <div class={contentWrap}>
                        <span class={content1}>目的地位于</span>
                        {pathObj.endFloorIdx > 0 ? <span class={content2}>{pathObj.endFloorIdx}F</span> : <span class={content2}>MB</span>}
                    </div>

                    {pathObj.navType == '实时' ? <span
                        class={navigate}
                        onClick={this.toNav}
                    >开始导航</span> : <span class={navigate} onClick={this.toNav}> 模拟导航</span >}
                </div >
            </div >
        </Fragment >;
    },
});